﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>about</title>
     <link href="../../Content/element-ui/lib/theme-chalk/index.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/vue-2.6.11/dist/vue.min.js" type="text/javascript"></script>
    <script src="../../Content/element-ui/lib/index.js" type="text/javascript"></script>
    <script src="../../Content/axios/dist/axios.min.js" type="text/javascript"></script>
    <style>
        
        html,body,#app {height: 100%;margin:0px}
    .el-row {
    margin-left:10px; 
       margin-top: 20px;
  }
  form {
    display: block;

}
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 20px;
}
.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight:normal;
}
    </style>
</head>
<body>
    <div id="app">
    <el-container style="height:100%;">
  <el-header height="52px">
  
<el-row>
 <el-button type="primary" size="small" v-on:click="dialogVisible = true" icon="el-icon-circle-plus-outline" >新增</el-button>
 <el-button  type="danger" size="small" icon="el-icon-delete" v-on:click="del" >批量删除</el-button>
 </el-row></el-header>
  <el-main>
  <el-row>
     <el-table
    :data="tableData"
    border
    row-key="id"
    size="small"
    style="width: 100%"
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     v-on:selection-change="handleSelectionChange"
    >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
 
    <el-table-column
      prop="typename"
      label="类别"
      width="400">
    </el-table-column>
   
     <el-table-column label="操作" width="200">
      <template slot-scope="scope">
        <el-button size="mini" v-on:click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" v-on:click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

   </el-row></el-main>
 
 <el-dialog
  title="新增类型"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
   <el-form ref="form" :model="form" size="small" :rules="rules" style="width:100%;" label-width="80px">
       <el-form-item label="上级类别" prop="sitename">
          <el-cascader
    v-model="form.parentids"
    :options="tableData"
    clearable
    :props="{ value:'id',label:'typename',checkStrictly: true }"
    v-on:change="handleChange"></el-cascader>
       </el-form-item>

       <el-form-item label="类别名称" prop="typename">
         <el-input v-model="form.typename" maxlength="100" show-word-limit re ></el-input>
      </el-form-item>

   </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button v-on:click="restform()">取 消</el-button>
    <el-button type="primary" v-on:click="onSubmit('form')">确 定</el-button>
  </span>
</el-dialog>


    
 

    </div>
     <script type="text/javascript">
        

		new Vue({
            el : '#app',
            data(){
				return {
                    multipleSelection : [],
                    search : 
                    {
                        title : ''
                    },
                    form : 
                    {
                        id : 0,
                        typename : '',
                        parentid:0,
                        parentids : ''
                    },
                    rules : 
                    {
                        typename : [{
                            required : true,
                            message : '请输入类别名称',
                            trigger : 'change'
                        }]
                    },
                    
                    dialogVisible : false,
                    tableData : []
                }
            },
            created() {
                let that=this;
				that.loaddata();
            },
            methods : 
            {
                transformRequest(data){
                    let params = '';
                    for(let index in data){
                        params += index + '=' + data[index] + '&';
                    }
                    return params;
                },
                loaddata(){
                   let that=this;
                   axios.post('/News/gettypelist',that.transformRequest({keyword:that.search.title,start:0,limit:0})).then(function(response){
                             if(response.data!=""){
				 			    that.tableData=response.data.data;
                             }
                        })
                

                },
				handleEdit(index, row){
                   this.dialogVisible=true;
                   this.form=row;
                   let parentids=[];
                   row.parentids.split(",").forEach((item,index,array)=>{
                        parentids.push(Number(item))
                   })
                   this.form.parentids=parentids;//row.parentids.split(",");
                    console.log(this.form);
                },
                handleDelete(index, row){
                let that=this;
				this.$confirm('确认删除？').then(_ => 
                {
                    axios.post('/News/batchdeltype', that.transformRequest({
                        ids : row.id
                    })).then(function(response){
                        let result = JSON.parse(response.data);
                        if(result.success){
                            that.$message({
                                message : result.msg,
                                type : 'success',
                                duration : '500',
                                onClose : function(){
                                    that.loaddata();
                                }
                            });
                            
                        }
                        else{
                            that.$message.error(result.msg);
                        }
                    })
                })
                },
                searchdata(){
                    this.loaddata();
                },
                handleSelectionChange(val){
                    this.multipleSelection = val;
                },
                restform(){
                    this.dialogVisible=false;
                    this.form.id = 0;
                    this.form.typename = "";
                    this.form.parentid = 0;
                    this.form.parentids = "";
                    this.loaddata();
                },
                handleClose(done) {
					this.restform();
                },
				handleChange(value){
                   
					if(value.length == 0){
                        this.form.parentid = 0;
                    }
                    else{
                        this.form.parentid = value[value.length - 1];
                    }
                    console.log(this.form)
                },
                onSubmit(formName){
					var that = this;
                    this.$refs[formName].validate((valid) => 
                    {
						if(valid){
                       
                        console.log(that.transformRequest(that.form))
                            axios.post('/News/savetype', that.transformRequest(that.form)).then(function(response){
                                console.log(response.data)
                                var result = JSON.parse(response.data);
                                if(result.success){
									that.$message({
                                        message : "保存成功",
                                        type : 'success',
                                        duration : '500',
                                        onClose : function(){
                                           that.restform();
                                        }
                                    });
                                }
                                else{
                                    that.$message.error("保存失败");
                                }
                                
                            }).catch(function(error){
                                console.log(error);
                            });
                        }
                        else{
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                del(){
                   let that=this;
                   if(this.multipleSelection.length==0){
					this.$message({
                        type : 'info',
                        message : '请你选择要删除的记录'
                    });
                   }else{
                   this.$confirm('确认删除？').then(_ => 
                {
                    var _ids = '';
                    for (var i = 0; i < this.multipleSelection.length; i++) {
                        _ids += this.multipleSelection[i].id+",";
                    }
					axios.post('/News/batchdeltype', that.transformRequest({
                        ids : _ids
                    })).then(function(response){
                        let result = JSON.parse(response.data);
                        if(result.success){
                            that.$message({
                                message : result.msg,
                                type : 'success',
                                duration : '500',
                                onClose : function(){
                                    that.loaddata();
                                }
                            });
                            
                        }
                        else{
                            that.$message.error(result.msg);
                        }
                    })
                   })
                   
                   }
                
                }
            }
        });




    </script>
</body>
</html>
